<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_CSS选择器</title>
    <style>
        /*1.标签名选择器：选中此标签名对应的所有元素*/
        h4{
            color: blue;
        }
        /*2.id选择器：选中指定id值的唯一一个元素*/
        #d1{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        /* 3.类选择器*/
        .msg{
            color: aliceblue;
        }
        .error{
            background-color: blueviolet;
        }
        .success{
            background-color: green;
        }
        /*  4.伪类选择器：选中元素中的某种状态  */
        a:link{ /* 超链接未被访问过的状态*/
            color: gray;
        }
        a:visited{ /* 超链接已经被访问过的状态 */
            color: green;
        }
        a:hover{ /* 元素悬停的状态 */
            color: orange;
        }
        a:active{ /* 超级解激活时的状态 */
            color: red;
        }
        /* 5.并列选择器：必须紧挨在一起写，表示同时满足两个选择器条件才会生效，是"与"的关系 */
        #d1:hover{ /* 元素悬停的状态 */
            background-color: yellow;
        }
        /* 6.群组选择器:用逗号隔开，只要满足其中一个选择器的条件就会生效，是"或"的关系 */
        h4,#d1,.error{
            border: 5px solid black;
        }
        /* 7.后代选择器： */
        #d2 span{
                background-color: purple;
        }
        /* 8.子代选择器 */
        #d2>div>p>span{
            color: white;
        }
    </style>
</head>
<body>
    <div>ysyyds</div>
    <div id="d1">ysyyds</div>
    <p>ys爱睡觉</p>
    <h4>ys666</h4>
    <h4>ys666</h4>
    <hr>
    <span class="error msg">用户名不存在</span>
    <span class="error msg">密码错误</span>
    <span class="error msg">手机号错误</span>
    <span class="success msg">用户名ys</span>
    <span class="success msg">密码ysyyds</span>
    <span class="success msg">邮箱ysyyds520</span>
    <hr>
    <a href="https://www.baidu.com">超链接1</a>
    <a href="abc">超链接2</a>
    <hr>
    <div id="d2">
        <span>111</span>
        <div>
            <span>222</span>
            <p>ys520</p>
            <p>ys<span>333</span>yyds</p>
        </div>
        <span>444</span>
    </div>
</body>
</html>